<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页</title>
	</head>
	<style>
		label {
	        display: block;
	        margin-bottom: 5px;
	    }
	</style>
	<body>
		<h2>注册页</h2>
		<form id="registrationForm" action="注册成功.html" method="get">
			<label for="username">用户名:</label>
			<input type="text" id="username" name="username" required><br>
			<label for="email">邮箱:</label>
			<input type="email" id="email" name="email" required><br>
			<fieldset>
				<legend>爱好:</legend>
				<label><input type="checkbox" name="hobby" value="篮球">篮球</label>
				<label><input type="checkbox" name="hobby" value="足球">足球</label>
				<label><input type="checkbox" name="hobby" value="游泳">游泳</label>
				<label><input type="checkbox" name="hobby" value="跑步">跑步</label>
			</fieldset>
			<button type="button" id="selectAll">全选</button>
			<button type="button" id="deselectAll">全不选</button><br>
			<button type="submit">注册</button>
		</form>

		<script>
			document.getElementById('selectAll').addEventListener('click', function() {
				var checkboxes = document.querySelectorAll('input[type="checkbox"]');
				checkboxes.forEach(function(checkbox) {
					checkbox.checked = true;
				});
			});

			document.getElementById('deselectAll').addEventListener('click', function() {
				var checkboxes = document.querySelectorAll('input[type="checkbox"]');
				checkboxes.forEach(function(checkbox) {
					checkbox.checked = false;
				});
			});
		</script>
	</body>
</html>
